<template>
	<div class="doc_pc_components">
		<div class="doc-head">
			<Radio
				:model-value="type"
				label="示例"
				name=""
				class="doc-type"
				@update:model-value="$router.replace(base)"
			/>
			<Radio
				:model-value="type"
				label="性能测试"
				name="performance"
				class="doc-type"
				@update:model-value="$router.replace(base+'/performance')"
			/>
		</div>
		<ScrollArea
			v-slot="{containerSize:{width}}"
			visible
			class="doc-content"
		>
			<component
				:is="comp"
				:style="{
					width:width?width+'px':null,
				}"
				style="display:inline-block"
			/>
		</ScrollArea>
	</div>
</template>

<script setup>
import {defineAsyncComponent,computed} from 'vue';
import {Radio,ScrollArea} from 'powerful-ui/pc-default';

const props=defineProps({
	component:String,
	type:{
		type:String,
		default:'',
	},
});

const base=computed(() => {
	return `/pc/components/${props.component}`;
});

const comp=computed(() => {
	let {component,type}=props;
	if(type){
		component+='/'+type;
	}
	return defineAsyncComponent(() => {
		return import(`/doc/pc/components/${component}/index.vue`);
	});
});
</script>

<style lang="scss">
.doc_pc_components{
	height:100%;
	>.doc-head{
		height:40px;
		display:flex;
		align-items:center;
		background:#fff;
		>.doc-type{
			margin-left:20px;
		}
	}
	>.doc-content{
		height:calc(100% - 40px);
	}
}
</style>